import React, {Component} from "react";
import {
    View,
    TouchableOpacity,
    Alert,
    StyleSheet,
    TextInput,
    Dimensions,
    Text,
    Image,
    FlatList,
    Modal
} from "react-native";
// import ClosableModal  from 'rn-closable-modal'

const {width, height} = Dimensions.get('window');

type Props = {
    show:boolean,
    closeModal:Function,
    confirmPress:Function,
    cancelPress:Function,
    data:Array,
}

export default class RefuesDetailAlertDialog extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.show,
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({isVisible: nextProps.show});
    }

    closeModal(){
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
    }

    confirm(){

        console.log('2222')
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
        this.props.confirmPress()
    }
    cancel(){
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
        this.props.cancelPress()
    }



    renderCell =({item})=>{
        return <View style={{shadowColor: '#000000',
            shadowOffset: {
                h: 2,
                w: 2
            },
            shadowRadius: 1,
            shadowOpacity: 0.4,borderRadius:2,backgroundColor:'white',marginLeft:12,marginRight:12,paddingLeft:12,paddingRight:12}}>
            <Text style={{color:'#666666',fontSize:13,marginTop:12,marginBottom:10}}>{item.course_title}</Text>
            <View style={{width:(width - 72),height:1,backgroundColor:'rgba(0,0,0,0.1)',marginBottom:12}}/>
            <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',marginBottom:12}}>
                <View style={{alignItems:'center'}}>
                    <Text style={{color:'#333333',fontSize:11}}>已上章节 / 总章节</Text>
                    <View style={{flexDirection:'row',alignItems:'center'}}>
                        <Text style={{color:'#DB3843',fontSize:11,marginTop:10}}>{item.has_lesson}</Text>
                        <Text style={{color:'#666666',fontSize:11,marginTop:10}}> / </Text>
                        <Text style={{color:'#666666',fontSize:11,marginTop:10}}>{item.all_lessons}</Text>
                    </View>
                </View>
                <View style={{backgroundColor:'rgba(0,0,0,0.1)',width:1,height:25}}/>
                <View style={{alignItems:'center'}}>
                    <Text style={{color:'#333333',fontSize:11}}>购课金额</Text>
                    <Text style={{color:'#666666',fontSize:11,marginTop:10}}>{item.buy_price}</Text>
                </View>
                <View style={{backgroundColor:'rgba(0,0,0,0.1)',width:1,height:25}}/>
                <View style={{alignItems:'center'}}>
                    <Text style={{color:'#333333',fontSize:11}}>扣款金额</Text>
                    <Text style={{color:'#666666',fontSize:11,marginTop:10}}>{item.buy_price - item.course_refund - item.coupon_price}</Text>
                </View>
                <View style={{backgroundColor:'rgba(0,0,0,0.1)',width:1,height:25}}/>
                <View style={{alignItems:'center'}}>
                    <Text style={{color:'#333333',fontSize:11}}>实退金额</Text>
                    <Text style={{color:'#DB3843',fontSize:11,marginTop:10}}>{item.course_refund}</Text>
                </View>
            </View>
        </View>
    }
    _keyExtractor = (item, index) => index + 'kk';

    render() {

        return (
            <View style={{flex: 1,}}>
                <Modal
                    transparent={true}
                    visible={this.state.isVisible}
                    animationType={'fade'}
                    onRequestClose={() => this.closeModal()}>
                    <TouchableOpacity style={{flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)',justifyContent:'center'}} activeOpacity={1}
                                      onPress={() => this.closeModal()}>
                        <View style={{backgroundColor:'white',width:width - 24,marginLeft:12,borderRadius:3,alignItems:'center',}}>
                            <Text style={{color:'#111111',fontSize:16,fontWeight:'bold',marginTop:15,marginBottom:15}}>退款明细</Text>
                            <FlatList
                                scrollEnabled={false}
                                data={this.props.data}
                                renderItem={this.renderCell}
                                keyExtractor={this._keyExtractor}
                                ItemSeparatorComponent={()=><View style={{width:width-48,height:10}}/>}
                            />
                            <View style={{flexDirection:'row',alignItems:'center',marginTop:10,marginBottom:15,marginLeft:12,marginRight:12}}>
                                <TouchableOpacity onPress={()=>{this.cancel()}} style={{width:150,height:25,justifyContent:'center', alignItems:'center',backgroundColor:'#DB3843',borderRadius:4}}>
                                    <Text style={{color:'#FEFEFE',fontSize:12,}}>不退了</Text>
                                </TouchableOpacity>
                                <View style={{flex:1}}/>
                                <TouchableOpacity onPress={()=>{
                                    this.confirm()
                                }} style={{width:150,height:25,justifyContent:'center', alignItems:'center',backgroundColor:'#DCDCDC',borderRadius:4}}>
                                    <Text style={{color:'#FEFEFE',fontSize:12,}}>提交申请</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </TouchableOpacity>
                </Modal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        justifyContent:'center',
        alignItems:'center',
        borderRadius:3,
        width:width-24,
        height:500,
    },

});